<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>个人资料</title>
    <style type="text/css">
        html, body {
            padding: 0;
            margin: 0;
            background-color: #ffffff;
            width: 100%;
        }

        body {
            width: 400px;
            margin: 50px auto;
            border-radius: 10px;
            box-shadow: 0 0 10px #CCCCCC;
        }
    </style>
    <style type="text/css">
        #popups-window {
            width: 100%;
            display: flex;
            padding: 10px 0;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        #popups-window > table > tbody > tr > td {
            padding: 10px;
        }

        #popups-window > table > tbody > tr > td > .label {
            font-size: 16px;
        }

        #popups-window > table > tbody > tr > td > label > .input {
            width: 200px;
            font-size: 16px;
            outline: none;
            border: none;
            resize: none;
            padding: 5px 10px;
            border-bottom: 1px solid #97a89d;
            transition: all 300ms ease;
        }

        #popups-window > table > tbody > tr > td > label > .select {
            width: 220px;
            font-size: 15px;
            outline: none;
            border: none;
            resize: none;
            padding: 5px 10px;
            border-bottom: 1px solid #97a89d;
            transition: all 300ms ease;
        }

        #popups-window > table > tbody > tr > td > label > textarea.input {
            height: 80px;
        }

        #popups-window > table > tbody > tr > td > label > .input:focus {
            border-bottom: 1px solid #0000ff;
        }

        #popups-window > .button-box {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
        }

        #popups-window > .button-box > .button {
            border-radius: 15px;
            font-size: 16px;
            outline: none;
            border: none;
            background: none;
            width: 80px;
            height: 30px;
            cursor: pointer;
            transition: all 300ms ease;
        }

        #popups-window > .button-box > .button.confirm:hover {
            color: #FFFFFF;
            background-color: #97a89d;
        }

        #popups-window > .button-box > .button.cancel:hover {
            color: #FFFFFF;
            background-color: #ff0000;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/static/css/message.css"/>
</head>
<body>
<form action="" method="post" id="popups-window">
    <table>
        <tbody>
        <tr>
            <td>
                <span class="label">姓名</span>
            </td>
            <td>
                <label>
                    <input class="input name" name="name" type="text" minlength="1" maxlength="16"
                           autocomplete="off" placeholder="1~16位字符" required>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">账号</span>
            </td>
            <td>
                <label>
                    <input class="input account" name="account" type="text" minlength="1" maxlength="32"
                           autocomplete="off" placeholder="1~32位字符" required>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">密码</span>
            </td>
            <td>
                <label>
                    <input class="input password" name="password" type="password" minlength="1" maxlength="32"
                           autocomplete="off" placeholder="1~32位字符" required>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">性别</span>
            </td>
            <td>
                <label>
                    <select class="select gender" name="gender" required>
                        <option>-请选择性别-</option>
                        <option value="true">男</option>
                        <option value="false">女</option>
                    </select>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">手机</span>
            </td>
            <td>
                <label>
                    <input class="input phone" name="phone" type="tel" minlength="11" maxlength="11"
                           autocomplete="off" placeholder="11位数字" required>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">邮箱</span>
            </td>
            <td>
                <label>
                    <input class="input email" name="email" type="email" minlength="1" maxlength="32"
                           autocomplete="off" placeholder="1~32位字符" required>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">QQ号</span>
            </td>
            <td>
                <label>
                    <input class="input qq" name="qq" type="number" minlength="1" maxlength="16"
                           autocomplete="off" placeholder="1~16位数字" required>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">钉钉</span>
            </td>
            <td>
                <label>
                    <input class="input dingding" name="dingding" type="text" minlength="1" maxlength="16"
                           autocomplete="off" placeholder="1~16位字符" required>
                </label>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="button-box">
        <button class="button confirm" type="submit">确定</button>
    </div>
</form>

<script src="/static/js/jquery-3.6.1.js" type="text/javascript"></script>
<script src="/static/js/message.js" type="text/javascript"></script>
<script type="application/javascript">
    $(function () {
        // 获取组件
        let nameInputEle = $('#popups-window input[name="name"]');
        let accountInputEle = $('#popups-window input[name="account"]');
        let passwordInputEle = $('#popups-window input[name="password"]');
        let genderInputEle = $('#popups-window select[name="gender"]');
        let phoneInputEle = $('#popups-window input[name="phone"]');
        let emailInputEle = $('#popups-window input[name="email"]');
        let numberInputEle = $('#popups-window input[name="number"]');
        let qqInputEle = $('#popups-window input[name="qq"]');
        let dingdingInputEle = $('#popups-window input[name="dingding"]');

        // 程序初始执行
        loadMyInfo();

        // 加载原数据
        function loadMyInfo() {
            // 获取数据
            $.ajax({
                url: '/api/user/my-info',
                type: "GET",
                success: function (res) {
                    if (res.code === 0) {  // 业务层面成功
                        nameInputEle.val(res.data.userInfo.name);
                        accountInputEle.val(res.data.account);
                        passwordInputEle.val(res.data.password);
                        genderInputEle.val(res.data.userInfo.gender.toString());
                        phoneInputEle.val(res.data.userInfo.phone);
                        emailInputEle.val(res.data.userInfo.email);
                        numberInputEle.val(res.data.userInfo.number);
                        qqInputEle.val(res.data.userInfo.qq);
                        dingdingInputEle.val(res.data.userInfo.dingding);
                    } else {
                        $.message({type: 'error', content: res.msg});
                    }
                }
            });
        }

        // 监听表单提交
        $('#popups-window').submit(function () {
            // 获取数据
            let name = nameInputEle.val();
            let account = accountInputEle.val();
            let password = passwordInputEle.val();
            let gender = genderInputEle.val();
            let phone = phoneInputEle.val();
            let email = emailInputEle.val();
            let number = numberInputEle.val();
            let qq = qqInputEle.val();
            let dingding = dingdingInputEle.val();

            // 提交数据
            $.ajax({
                url: '/api/user/edit-my-info',
                type: "PUT",
                data: {
                    'userInfo.name': name,
                    'account': account,
                    'password': password,
                    'userInfo.gender': gender,
                    'userInfo.phone': phone,
                    'userInfo.email': email,
                    'userInfo.number': number,
                    'userInfo.qq': qq,
                    'userInfo.dingding': dingding
                },
                success: function (res) {
                    if (res.code === 0) {  // 业务层面成功
                        $.message({
                                type: 'success', content: res.msg, onClose: function () {
                                    window.location.reload();
                                }
                            }
                        );
                    } else {
                        $.message({type: 'error', content: res.msg});
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
